
/**
 * Created by thomas on 2017/5/2.
 */
import React,{Component} from 'react';
import {withRouter,Route} from 'react-router-dom';
import Routes from './routes'
import Bus from './Bus'
import Cart from  './Cart'
import Height from './Height'
import Age from "./get_age";
const RouteWithSubRoutes = (route) => (
    <Route path={route.path} render={props => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes}/>
    )}/>
)

class Tacos extends React.Component{
    constructor(props) {
        super(props);
        this.state= {
            Routes:Routes,
            dot1:true,
            dot2:false,
            dot3:false,
            dot4:false,
            pre_dot:"dot1"
        };
        this.props.history.push("/tacos/bus");
        this.change_url=this.change_url.bind(this);
        this.get_dot=this.get_dot.bind(this);
    }
    change_url(e){
        this.props.history.push(e)
    }
    get_dot(e){
        let new_dot='dot'+e;//下一的dot名字
        let dot_obj={};
         dot_obj[new_dot]=true;
        this.setState(dot_obj);//set 进去了

        let predDot=this.state.pre_dot;//上一个的dot
        let pre_Dot={};
        pre_Dot[predDot]=false;
        this.setState(pre_Dot);//不要了
        this.setState({
            pre_dot:new_dot
        })
    }
    render() {
        return (
            <div>
                <Route path="/tacos/Age" render={props => (
                    // pass the sub-routes down to keep nesting
                    <Age {...props}  get_dot={this.get_dot} pre_dot={this.state.pre_dot}/>
                )}/>
                <Route path="/tacos/Height" render={props => (
                    // pass the sub-routes down to keep nesting
                    <Height {...props} get_dot={this.get_dot}  pre_dot={this.state.pre_dot}/>
                )}/>
                <Route path="/tacos/bus" render={props => (
                    // pass the sub-routes down to keep nesting
                    <Bus {...props} get_dot={this.get_dot}  pre_dot={this.state.pre_dot}/>
                )}/>
                <Route path="/tacos/cart" render={props => (
                    // pass the sub-routes down to keep nesting
                    <Cart {...props} get_dot={this.get_dot}  pre_dot={this.state.pre_dot}/>
                )}/>
                <div className="bottom_dot" ref="dot_btom">
                    <div className={this.state.dot1?"dot_act dot":"dot"}>.</div>
                    <div className={this.state.dot2?"dot_act dot":"dot"}>.</div>
                    <div className={this.state.dot3?"dot_act dot":"dot"}>.</div>
                    <div className={this.state.dot4?"dot_act dot":"dot"}>.</div>
                </div>
            </div>
        )
    }
}
export default withRouter(Tacos);
